<template>
  <div>

     
   <myheader></myheader>
		
		<div id="carousel" class="carousel slide" data-ride="carousel">
		
	
			<!-- <ul class="carousel-indicators">
				<li data-target="#carousel" data-slide-to="0" class="active"></li>
				<li data-target="#carousel" data-slide-to="1"></li>
				<li data-target="#carousel" data-slide-to="2"></li>
			</ul> -->
	
			<div class="carousel-inner">
			
				<!--Text only with background image-->
				<!-- <div class="carousel-item active">
					<div class="container slide-textonly">
						<div>
							<h1>York &amp; Smith</h1>
							<p class="lead">Spring/Summer 2018 Collection</p>
							<a href="#" class="btn btn-outline-secondary">View Collection</a>
						</div>
					</div>
				</div> -->

				<!-- 幻灯片组件 -->
				<Carousel :height="700" :datas='params'pageTheme='circle' @click='click'>
				</Carousel>
				
			
			</div>
		</div>
		<section class="collections text-center ">
			<div class="container-fluid">
				<div class="row">
					<div class="collection col-md-6 alt-background">
						<div class="container container-right text-center">
							<div>
								<h1>Women's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-secondary">Browse Women's</a>
							</div>
						</div>
					</div>
					<div class="collection col-md-6 bg-secondary inverted">
						<div class="container container-left text-center">
							<div>
								<h1>Men's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-white">Browse Men's</a>
							</div>
						</div>
					</div>
				</div>
			</div>
    </section>
    
		<section class="featured-block text-center">
			<div class="container">
				<div class="row justify-center">
					<div class="col-md-6 text-center" style="float: left;">
						<img class="mt-4 mb-4 img-fluid" src="../assets/images/placeholder-jacket.png" style="width: 100%;">
					</div>
					<div class="col-md-6 text-center text-md-left" style="float: left;margin-right: auto;">
						<h2 class="mb-3">Spring/Summer Collection 2018</h2>
						<p class="lead mt-2 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus erat sed sem sagittis cursus.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
						<a href="#" class="btn btn-md btn-outline-primary mt-3">Shop Now</a>
					</div>
					

				</div>
			</div>
		</section>
		
		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4">商品展示</h3>
				<div class="row">
					<!-- 遍历商品列表	 -->
					<div v-for="(item, index) in data_list" :key="index" class="col-sm-6 col-md-3 col-product">
						<figure>
							<a :href="'/item/?gid='+item.id"><img class="rounded-corners img-fluid" :src="'http://127.0.0.1:8000/static/upload/'+item.img+''"	width="240" height="240"></a>
							<figcaption>
								<div class="thumb-overlay">
									<a :href="'/item?gid='+item.id" title="More Info">
										<i class="fas fa-search-plus"></i>
									</a>
								</div>
							</figcaption>
						</figure>
						<h4><a :href="'/item/?gid='+item.id">{{item.name}}</a></h4>
						<p><span class="emphasis">${{item.price}}</span></p>
						<p><a :href="'/editgood/?id='+item.id">修改商品</a></p>
					</div>
					<div style="float: right;">排行榜
						<ul v-for="(item, index) in goodrank" :key="index">
							<li v-if="index<3" style="color:red">第{{index+1}}名---{{ item.name }}---访问量：{{ item.clicks }}
							</li>
							<li v-else>第{{index+1}}名---{{ item.name }}---访问量：{{ item.clicks }}
							</li>
						</ul>
					</div>
				</div>
				
				<div><!-- heyui分页逻辑 -->
					<Pagination v-model="pagination" @change="change" layout='pager,jumper'></Pagination>
				</div>
				<div>
					<!-- 自主分页逻辑 -->
					<a  v-if="lastpage" @click='get_data(lastpage)'>上一页</a>
					<ul><li v-for="(item1, index) in all" :key="index"><a @click='get_data(item1)'>{{item1}}</a></li></ul>
					<a  v-if="nextpage" @click='get_data(nextpage)'>下一页</a>
				</div>
			</div>
		</section>
		
		<div class="divider"></div>
		
		<section class="cta text-center">
			<div class="container">
				<h3 class="mt-0 mb-4">Sign up now to save 10% on your first order</h3>
				<form class="subscribe">
					<div class="form-group row pt-3">
						<div class="col-sm-8 mb-3">
							<input type="text" class="form-control" id="inputName" placeholder="Your Name">
						</div>
						<div class="col-sm-4">
							<button type="submit" class="btn btn-lg btn-outline-primary">Sign me up</button>
						</div>
					</div>
				</form>
			</div>
		</section>
		
		<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>
import myheader from './myheader'
import myfooter from './myfooter'

export default {
	data () {
		return {
		msg: "这是一个变量",
		//幻灯片数据
		params:[
			{
			title:'第一张',
			link:'http://www.baidu.com',
			image:'https://desk-fd.zol-img.com.cn/t_s1920x1080c5/g2/M00/0E/08/ChMlWV5xxneIT5OpAAvl6PeUBNcAANvZgDCXdsAC-YA332.jpg'
			},
			{
			title:'第二张',
			link:'http://www.taobao.com',
			image:'https://desk-fd.zol-img.com.cn/t_s1920x1200c5/g5/M00/01/0E/ChMkJ1bKwXCIWA17AAw3ZD2QoZAAALGYQGItfQADDd8205.jpg'
			}
		],
		//商品列表变量
		data_list:[],
		//分页器变量
		pagination:{
			page:1,
			size:2,
			total:3,
		},
		//自主分页
		total:0,
		cur:1,
		all:0,//总页数
		lastpage:0,
		nextpage:0,
		size:3,
		//排行榜
		goodrank:[],
		}
	},
	mounted:function(){
		// 调用排行榜接口
		this.get_rank()
		// 调用自主分页接口
		this.get_data(1)

		//请求商品接口
		// this.axios({
		// 	url:'http://127.0.0.1:8000/goodslist/',
		// 	params:{
		// 		page:1,
		// 		size:2,
		// 	}
		// }).then(resp=>{
		// 	// console.log(resp)
		// 	this.data_list = resp.data.data
		// 	// console.log(this.data_list)
		// })

		this.axios({
			url:'http://127.0.0.1:8000/piclist/'
		}).then(resp=>{
			// console.log(resp.data)
			
			var mylist = resp.data;
			var datalist = [];
			//遍历
			for (let i = 0; i < mylist.length; i++) {
				datalist.push({'title':mylist[i]['title'],'link':mylist[i]['link'],'image':mylist[i]['img'],})
			}
			this.params = datalist;
		}).catch(error=>{
		})
	
	
},
  methods:{
	  	//排行榜接口
		get_rank(){
			this.axios({
			url:'http://127.0.0.1:8000/goodrank/',
		}).then(resp=>{
			console.log(resp)
			this.goodrank = resp.data
		})
		},
		//自主分页接口
		get_data(mypage){
			//请求商品接口
		this.axios({
			url:'http://127.0.0.1:8000/goodslist/',
			params:{
				page:mypage,
				size:this.size,
			}
		}).then(resp=>{
			// console.log(resp)
			this.data_list = resp.data.data
			// console.log(this.data_list)
			if (mypage == 1) {
				this.lastpage = 0;
			}else{
				this.lastpage = mypage- 1 ;
			}

			// 计算总页数（找出最后一页）
			this.all = Math.ceil(resp.data.total / this.size)
			if (mypage == this.all) {
				this.nextpage = 0;
			}else{
				this.nextpage = mypage + 1 ;
			}
		})
		},


		//幻灯片点击事件
		click(index,data){
			// console.log(data);
			window.location.href = data.link
		},
		// 分页器事件
		change(){
			this.axios({
			url:'http://127.0.0.1:8000/goodslist/',
			params:{
				page:this.pagination.page,
				size:this.pagination.size,
			}
		}).then(resp=>{
			// console.log(resp)
			this.data_list = resp.data.data
			// console.log(this.data_list)
		})
		}
	}
	,
components:{
	"myheader":myheader,
	'myfooter':myfooter,
},

}


</script>
 
<style>



</style>